import { Button } from 'antd';
import {
	ProFormInstance,
	ProForm,
	ProColumns,
	ModalForm,
	ProFormText,
	ProFormDatePicker,
	ProFormSelect,
	ProFormDateTimePicker,
	ProFormDigit,
	ProFormTextArea,
	ProFormSwitch,
	ProFormRadio,
	ProFormCheckbox,
} from '@ant-design/pro-components';
import { PlusOutlined } from '@ant-design/icons';
import { useRef } from 'react';
import type { HFColumns } from './DataTable';

type propTypes<T = any> = {
	title: string;
	data: T;
	columns: HFColumns[];
	onFinish: (values: any) => Promise<boolean>;
	onOpen?: () => void;
};

/*
editable: 不在EditForm中出现
disable: 在EditForm中出现,但不可编辑
request: 与 params 配合, 实现读取数据, 作为 valueEnum 的值
fieldProps: 表单项的属性(如: 日期型的 format)
onFinish: 表单提交事件
onOpen: 弹窗打开事件
*/
const EditForm = (props: propTypes) => {
	const isNew = props.title === '新建';
	// 使用一个变量来跟踪当前的分组
	const formItems: any[] = [];

	// 渲染表单项, 增加 editType 指定编辑和新建时的类型(Select 类型无法添加)
	const renderFormItem = (item: HFColumns) => {
		if (item.editable === false) return null;

		const itemOptions = {
			name: item.dataIndex || item.key,
			label: item.title as any,
			width: (item.width as any) || 'sm',
			disabled: (item.disable as boolean) && props.title === '编辑',
			initialValue: item?.initialValue || (props?.data as any)[item.dataIndex as string],
			fieldProps: { ...item.fieldProps },
		};

		switch (item.editType || item.valueType) {
			case 'text':
				return <ProFormText key={(item.key || item.dataIndex)} {...itemOptions} />;
			case 'digit':
				return <ProFormDigit key={item.key || item.dataIndex} {...itemOptions} />;
			case 'password':
				return <ProFormText.Password key={item.key || item.dataIndex} {...itemOptions} />;
			case 'switch':
				return <ProFormSwitch key={item.key || item.dataIndex}	{...itemOptions} />;
			case 'radio':
				return <ProFormRadio key={item.key || item.dataIndex} {...itemOptions} />;
			case 'textarea':
				return <ProFormTextArea key={item.key || item.dataIndex} {...itemOptions} />;
			case 'checkbox':
				return <ProFormCheckbox key={item.key || item.dataIndex}	{...itemOptions} />
			case 'select':
				return <ProFormSelect key={item.key || item.dataIndex}	{...itemOptions} />
			case 'date':
				return <ProFormDatePicker key={item.key || item.dataIndex} {...itemOptions} />;
			case 'dateTime':
				return <ProFormDateTimePicker key={item.key || item.dataIndex} {...itemOptions} />;
			default:
				return null;
		}
	};
	const formRef = useRef<ProFormInstance>();
	return (
		<>
			<ModalForm
				title={props.title}
				formRef={formRef}
				trigger={
					<Button type={isNew ? 'primary' : 'link'}>
						{/* 加号图标 */}
						{props.title === '编辑' || <PlusOutlined />}
						{props.title}
					</Button>
				}
				modalProps={{
					destroyOnClose: true,
					// maskClosable: false, // 点击蒙层不关闭
					// onCancel: () => {
					// 	formRef.current?.resetFields()
					// 	// if (props.onOpen) props.onOpen()
					// }
				}}
				submitter={{
					searchConfig: {
						submitText: '提交',
						resetText: '取消',
					},
				}}
				clearOnDestroy={true}
				onFinish={(values) => {
					return props.onFinish(values);
				}}
				onOpenChange={(visiable) => {
					if (visiable && props.onOpen) props.onOpen();
				}}
			>
				{
					props?.columns?.map((item: ProColumns, index: number) => {
						// 渲染当前表单项
						const formItem = renderFormItem(item);
						// 过滤 null 值(index 仍需下传, 以判断最后一个组件)
						if (formItem) formItems.push(formItem);
						// 3个为一组
						if (
							(formItems.length > 0 && formItems.length % 3 === 0) ||
							index === props.columns.length - 1
						) {
							const copyItems = formItems.slice();
							formItems.length = 0;
							return <ProForm.Group key={index}>{copyItems}</ProForm.Group>;
						}
						return null;
					})
				}
			</ModalForm>
		</>
	);
};

export default EditForm;
